<template>
  <div>
    <table>
      <tr>
        <td style="width: 220px">
          <el-switch
            v-model="switchValue"
            style="display:block;margin-top:15px"
            :width="50"
            active-color="#13ce66"
            :active-text="prop"
            @change="change"
          />
        </td>
        <td>
          <span style="display: inline-block;font-size: 14px">列宽</span>
          <el-input-number v-model="width" :min="30" style="width: 150px;" @change="widthChange" />
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  name: 'Switchshows',
  props: {
    prop: {
      type: String,
      required: true
    },
    value: {
      type: Boolean,
      required: true
    },
    conlumnWidth: {
      type: String,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      switchValue: this.value,
      width: this.conlumnWidth
    }
  },
  watch: {
    value(val) {
      this.switchValue = val
    }
  },
  methods: {
    change(val) {
      this.$emit('input', val)
    },
    widthChange(val) {
      // 调用父类的changeWidth
      this.$emit('changeWidth', { val: val, index: this.index })
    }
  }
}
</script>

<style scoped>

</style>
